<template>
  <footer class="bg-black text-white py-8">
    <div
      class="container mx-auto flex flex-col md:flex-row md:justify-between md:items-center">
      <!-- 左侧 Logo 和菜单 -->
      <div class="flex flex-col md:flex-row md:items-center">
        <!-- Logo 只在 PC 端显示 -->
        <img
          src="@/assets/logo-f.png"
          alt="logo"
          class="sm:block hidden h-10 mb-4 md:mb-0 md:mr-8" />
        <!-- <div class="mb-4 md:mb-0">
          <div class="font-bold text-lg">华蒙星体育</div>
          <div class="text-sm">WALMONOS</div>
        </div>
        <div class="md:ml-8">
          <div class="mb-2 md:mb-0">免费领取</div>
        </div> -->
      </div>
      <!-- 中间/右侧 服务热线和关注我们 -->
      <div class="flex flex-col items-center md:items-end">
        <div class="mb-2 md:mb-0">联系电话</div>
        <div class="text-2xl text-teal-400 mb-2 md:mb-0">4009-020-995</div>
      </div>
    </div>
    <div class="container mx-auto mt-6 md:text-base text-xs text-gray-400 flex flex-col">
      <div class="flex justify-between sm:py-[54px] py-[32px] gap-x-8 sm:text-base text-sm">
        <div class="flex flex-col gap-y-4">
          <span class="cursor-pointer">关于我们</span>
          <span class="cursor-pointer">
            公司地址: 重庆市民安大道优办余杭产业园
          </span>
          <span class="cursor-pointer">
            企业邮箱: 1729362388@qq.com
          </span>
        </div>
        <div class="flex flex-col gap-y-4">
          <span>关注我们</span>
          <!-- 社交图标 -->
          <div class="flex gap-x-4">
            <div
              class="icon-box flex justify-center items-center"
              v-for="(item, index) in socialIcons"
              :key="index">
              <img :src="item.icon" alt="" class="icon" />
              <div class="code-box">
                <img src="@/assets/code.jpg" alt="" class="img" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <span>Copyright © 2025-02-24 重庆炽焰体育科技有限公司 渝ICP备2025060321号</span>
    </div>
  </footer>
</template>

<script setup>
import weChat from "@/assets/wechat.png";
const socialIcons = [
  { name: "微信", icon: weChat },
  { name: "微博", icon: weChat },
  { name: "抖音", icon: weChat },
];
</script>
<style >
/* .container:last-child{
  border-top: 3px solid rgba(255, 255, 255, 0.1);
} */
.icon-box {
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  & > .code-box {
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: 134px;
    height: 134px;
    background-color: #fff;
    display: none;
    z-index: 2;
    transform: translateX(-50%);
    & > .img{
      width: 100%;
      height: 100%;
    }
    &::after {
      /* 倒三角形 */
      content: "";
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #fff;
    }
  }
  &:hover {
    background-color: #28b7b0;
    border-color: #28b7b0;
    & > .code-box {
      display: block;
    }
  }
}
.icon {
  width: 40px;
  height: 40px;
}
</style>
